<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="400px"
  @open="beforeOpen"
  :before-close="handleClose"
  custom-class="dialog-border"
  :close-on-click-modal="false"
)
  .modal-title(slot="title") 修改密码
  .modal-content
    el-form(:model="form", :rules="rules" ref="ruleForm" szie="small" label-width="100px")
      el-form-item(label="原始密码：" prop="oldPassword")
        el-input(placeholder="请输入原始密码", :type="oldPassword" v-model="form.oldPassword")
          i.iconfont.icon-seepwd(slot="suffix" @click="showPreview('oldPassword')")
      el-form-item(label="新密码：" prop="newPassword1")
        el-input(placeholder="请输入新密码", :type="newPassword1" v-model="form.newPassword1")
          i.iconfont.icon-seepwd(slot="suffix" @click="showPreview('newPassword1')")
      el-form-item(label="重新输入：" prop="newPassword2")
        el-input(placeholder="请重新输入密码", :type="newPassword2" v-model="form.newPassword2")
          i.iconfont.icon-seepwd(slot="suffix" @click="showPreview('newPassword2')")
  .modal-footer(slot="footer")
    el-button(size="small" @click="handleClose") 取消
    el-button(size="small" type="primary" @click="confirm") 确认
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { updatePassword, postLogout } from 'api'
import { hex_md5_salt } from '@/utils/md5'
import { base64decode, base64encode } from 'utils/base64'
export default {
  name: 'changePwdDialog',
  data () {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.newPassword1) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      form: {
        oldPassword: '',
        newPassword1: '',
        newPassword2: ''
      },
      oldPassword: 'password',
      newPassword1: 'password',
      newPassword2: 'password',
      rules: {
        oldPassword: [
          { required: true, message: '请输入原始密码', trigger: 'blur' }
        ],
        newPassword1: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ],
        newPassword2: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState({
      show: state => state.modal.showpwd
    })
  },
  methods: {
    ...mapActions([
      'changeShowpwd'
    ]),
    beforeOpen () {
      this.form = {
        oldPassword: '',
        newPassword1: '',
        newPassword2: ''
      }
    },
    handleClose () {
      this.changeShowpwd(false)
    },
    showPreview (key) {
      this[key] = this[key] === 'password' ? 'text' : 'password'
    },
    async confirm () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          try {
            let query = {}
            query.oldPassword = hex_md5_salt(encodeURIComponent(this.form.oldPassword))
            query.newPassword1 = hex_md5_salt(encodeURIComponent(this.form.newPassword1))
            query.newPassword2 = hex_md5_salt(encodeURIComponent(this.form.newPassword2))
            await this.$axios.post(updatePassword, { ...query })
            await this.logout()
            this.$message.success('修改成功！')
            this.changeShowpwd(false)
          } catch (err) {
            console.log(err)
            this.$message.error(err.message || err.ResultSet.errors)
          }
        }
      })
    },
    async logout () {
      try {
        await this.$axios.post(postLogout)
        this.$message({ message: '退出登录', type: 'success' })
        this.$router.replace({ name: 'login' })
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  }
} 
</script>

<style lang="scss" scoped>
</style>
